<script setup>
import { useRouter, useRoute } from 'vue-router'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { onMounted, ref, reactive } from 'vue'
import { addMonthCard, editMonthCard, getEditCard, RenewalCard } from '@/api/month.js'
// import { findMonthCard } from '@/api/month.js'
const router = useRouter()
const route = useRoute()
const title = ref('')
const formRef = ref(null)
const editlist = ref([])
const flag = ref(false)
// console.log(route.query.flags)
if (route.query.id) {
  const flags = route.query.flags
  const flages = Boolean(JSON.parse(flags))
  flag.value = flages
} else {
  route.query.flags = false
}
console.log(flag)
console.log(route.query.id)
// 表单数据
const formDatas = reactive({
  personName: '',
  phoneNumber: '',
  carNumber: '',
  carBrand: '',
  cardStartDate: '',
  cardEndDate: '',
  paymentAmount: '',
  paymentMethod: null,
  dataRange: []
})
// 下拉数据
const options = [
  { value: 'Wechat', label: '微信' },
  { value: 'Cash', label: '现金' },
  { value: 'Alipay', label: '支付宝' }
]
// 数据回写
if (route.query.id) {
  // 获取数据，浅拷贝
  const editcard = async () => {
    const res = await getEditCard(route.query.id)
    Object.assign(formDatas, res.data)
    delete formDatas.dataRange
    console.log(formDatas)
  }
  //title标题
  const booleans = () => {
    if (route.query.id && !flag.value) {
      title.value = '编辑月卡'
    } else if (route.query.id && flag.value) {
      title.value = '续费月卡'
    } else if (!route.query.id) {
      title.value = '添加月卡'
    }
  }
  // 调用
  onMounted(() => {
    editcard()
    booleans()
  })
}
// 编辑月卡
// 新增月卡
const handleCurrent = async () => {
  if (
    formDatas.cardStartDate === editlist.value.cardStartDate &&
    formDatas.cardEndDate === editlist.value.cardEndDate
  ) {
    console.log(formDatas)
  } else {
    const startDate = new Date(formDatas.dataRange[0])
    const date1 = dayjs(startDate)
    formDatas.cardStartDate = date1.format('YYYY-MM-DD')
    const endDate = new Date(formDatas.dataRange[1])
    const date2 = dayjs(endDate)
    formDatas.cardEndDate = date2.format('YYYY-MM-DD')
  }
  delete formDatas.dataRange
  if (route.query.id && !flag.value) {
    await editMonthCard(formDatas)
    // route.query.id = null
    message.success('修改月卡成功')
  } else if (route.query.id && flag.value) {
    delete formDatas.carNumber
    delete formDatas.carBrand
    delete formDatas.personName
    delete formDatas.phoneNumber
    delete formDatas.cardStatus
    delete formDatas.rechargeId
    console.log(formDatas)
    await RenewalCard(formDatas)
    // route.query.id = null
    message.success('月卡续费成功')
  } else {
    await addMonthCard(formDatas)
    message.success('月卡添加成功')
  }
  router.push('/parking/monthcard/')
}
onMounted(() => {})
</script>
<template>
  <a-card>
    <div class="head">
      <span>
        <a-button type="text" @click="router.back()">返回</a-button>|
        <a-button type="text">{{ route.query.id ? title : '新增月卡' }}</a-button>
      </span>
      <span style="cursor: pointer">黑马管理员</span>
    </div>
  </a-card>
  <a-card style="width: 80vw; margin: 2vw 10vw">
    <div class="tops">车辆信息</div>
    <a-form ref="fromRef" :model="formDatas">
      <a-row :gutter="24">
        <a-col :span="9" style="margin: 0px 80px">
          <a-form-item
            name="personName"
            label="车主姓名："
            :rules="[
              { required: true, message: '车主姓名不能为空', trigger: 'blur' },
              { min: 2, max: 5, message: '车主姓名要求在2~5个字符', trigger: 'blur' }
            ]"
          >
            <a-input
              :disabled="flag"
              v-model:value="formDatas.personName"
              placeholder="请输入车主姓名"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item
            name="phoneNumber"
            label="联系方式："
            :rules="[
              { required: true, message: '联系方式不能为空', trigger: 'blur' },
              {
                pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
                message: '请输入正确手机号码',
                trigger: 'blur'
              }
            ]"
          >
            <a-input
              :disabled="flag"
              v-model:value="formDatas.phoneNumber"
              placeholder="请输入联系方式"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="9" style="margin: 0px 80px">
          <a-form-item
            name="carNumber"
            label="车牌号码："
            :rules="[
              { required: true, message: '车牌号码不能为空', trigger: 'blur' },
              {
                pattern:
                  /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]$/,
                message: '请输入正确车牌号码！',
                trigger: 'blur'
              }
            ]"
          >
            <a-input
              :disabled="flag"
              v-model:value="formDatas.carNumber"
              placeholder="请输入车牌号码"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item
            name="carBrand"
            label="车辆品牌："
            :rules="[{ required: true, message: '请输入车辆品牌', trigger: 'blur' }]"
          >
            <a-input
              :disabled="flag"
              v-model:value="formDatas.carBrand"
              placeholder="请输入车辆品牌"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
  <a-card style="width: 80vw; margin: 0vw 10vw">
    <div class="tops">最近一次月卡缴费信息</div>
    <a-form ref="fromRef" :model="formDatas">
      <a-row :gutter="24">
        <a-col :span="9" style="margin: 0px 80px">
          <a-form-item
            name="dataRange"
            label="有效日期："
            :rules="[{ required: true, message: '有效日期不能为空', trigger: 'blur' }]"
          >
            <a-range-picker
              v-model:value="formDatas.dataRange"
              :placeholder="['开始日期', '结束日期']"
            />
          </a-form-item>
        </a-col>
        <a-col :span="9">
          <a-form-item
            name="paymentAmount"
            label="支付金额："
            :rules="[
              { required: true, message: '支付金额不能为空', trigger: 'blur' },
              {
                pattern: /^[1-9]\d*$/,
                message: '请输入正整数',
                trigger: 'blur'
              }
            ]"
          >
            <a-input v-model:value="formDatas.paymentAmount" placeholder="请输入支付金额"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="9" style="margin: 0px 80px">
          <a-form-item
            name="paymentMethod"
            label="支付方式："
            :rules="[{ required: true, message: '支付方式不能为空', trigger: 'blur' }]"
          >
            <a-select
              v-model:value="formDatas.paymentMethod"
              placeholder="请选择支付方式"
              :options="options"
            ></a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
  <div style="text-align: center; margin-top: 50px">
    <a-space>
      <a-button @click="formRef.resetFields()">重置</a-button>
      <a-button type="primary" @click="handleCurrent">确定</a-button>
    </a-space>
  </div>
</template>
<style>
body {
  background-color: #f4f6f8 !important;
}
.head {
  display: flex;
  justify-content: space-between;
}
.tops {
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
</style>
